Skip to main content

Tool configs

In general the whole idea with plz is that configs get reasonable defaults, depending on the project type. Plz also takes care of adjusting / translating the configs to the different tools, as they might have slightly different formats for the same things (e.g. aliases in webpack and jest).

Extending configs​

If you want to extend or override (parts of) the configs, you can do so via the plz config, e.g. through a .plzrc.js file (or any other config file convention supported by cosmiconfig.

.plzrc.js
const { themes } = require('@storybook/theming');

module.exports = {
  projectType: 'react-app', // for example
  bugsnag: {
    appKey: 'key-from-bugsnag-project' // optional, used for bugsnag webpack plugin
  },
  babel: (config) => {
    // gets the config plz generated
    // you can do whatever you want to the config here
    // and simply return your final version
    return config;
  },
  webpack: (config) => {
    // same as above
    return config;
  },
  storybook: {
    // e.g. for custom themes or any other option parameter
    // will be passed to `addParameters` as options
    theme: themes.dark
  }
};

Webpack​

info

webpack is mainly used for bundling app projects. There are configs for react component and module projects as well, but they are only used for other tools that need a webpack config, e.g. storybook. Beyond that we do not bundle these packages and instead assume they will be properly bundled, minified, etc. on app level.

We might wanna change this, and use either a very basic webpack setup or (even better?) a simple rollup setup to bundle libraries.

Plugins​

https://webpack.js.org/configuration/plugins/#plugins

CaseSensitivePathsPlugin​

React Component / Module — Plugin that makes sure import paths are treated case sensitive, to avoid conflicts created by developers working on macOS (which has a case insensitive file system).

https://github.com/Urthen/case-sensitive-paths-webpack-plugin

moment​

React App / React Component / Module — Custom context replacement plugin that removes all locales from moment (except for en-au).

https://github.com/jmblog/how-to-optimize-momentjs-with-webpack

ValidatorjsPlugin​

React App / React Component / Module — Similar to the moment plugin, this removes all locales from the validators package except for en.

https://github.com/julianburr/validatorjs-webpack-plugin

status​

React App (dev) — Custom plugin for additional logging during dev mode

HotModuleReplacementPlugin​

React App (dev) — Enables Hot Module Replacement (HMR) during dev mode

https://webpack.js.org/plugins/hot-module-replacement-plugin/

NamedModulesPlugin​

React App (dev) — Improves DX in dev mode.

https://webpack.js.org/configuration/mode#mode-development

HtmlPlugin​

React App — Plugin that simplifies creating and handling of HTML files, especially with hashed filenames. Handles the app entry HTML file.

https://github.com/jantimon/html-webpack-plugin

MiniCssExtractPlugin​

React App — Simple and lightweight plugin to extract CSS files.

https://github.com/webpack-contrib/mini-css-extract-plugin

HashedModuleIdsPlugin​

React App (prod) — Plugin for module identification in production.

NamedModulesPlugin​

React App (dev) — Plugin for module identification in dev mode.

BundleAnalyzerPlugin​

React App (prod, with stats option) — Creates bundle size stats from the generated webpack bundles and allows showing the size stats visualised as a dependecy map in the browser.

# Gets added to the webpack config when the option stats is defined
plz build --stats

https://github.com/webpack-contrib/webpack-bundle-analyzer

BugsnagSourceMapUploaderPlugin​

React App (prod) — Only applied if plz config has bugsnag.appKey defined. Uploads source maps to bugsnag on build. You can define bugsnag.appVersion in the plz config as well, if not defined the plugin will fall back using the version in your apps package json.

https://github.com/bugsnag/webpack-bugsnag-plugins#new-bugsnagsourcemapuploaderpluginoptswebpackplugin

ForkTsCheckerWebpackPlugin​

React App - Webpack plugin that runs the TypeScript type checker on a separate process.

https://github.com/TypeStrong/fork-ts-checker-webpack-plugin

###Optimizations

minimize​

React App (prod), React Component, Module — JS code minification is activated for production code.

https://webpack.js.org/configuration/optimization#optimizationminimize

minimizer​

React App (prod), React Component, Module — Plugin used in the optimizations of the production config to use terser as the parser for JS code minification.

https://github.com/webpack-contrib/terser-webpack-plugin

https://github.com/terser-js/terser

https://webpack.js.org/configuration/optimization#optimizationminimizer

noEmitOnErrors​

React App (prod) — Prevents erroring assets from being emitted during compilation.

https://webpack.js.org/configuration/optimization#optimizationnoemitonerrors

namedModules / namedChunks​

React App (dev) — Improved DX during dev mode.

Rules / Loaders​

https://webpack.js.org/configuration/module/#modulerules

Babel​

React App, React Component, Module — Standard babel loader for JS/JSX and TS/TSX files. plz uses Babel to transpile TypeScript, stripping out type annotations. Babel does not perform type checking; that's handled by the ForkTsCheckerWebpackPlugin plugin.

https://webpack.js.org/loaders/babel-loader

CSS & PostCSS​

? — Loader for CSS files. For React Apps we use the loader from the MiniCssExtractPlugin.

https://github.com/webpack-contrib/css-loader

https://github.com/webpack-contrib/mini-css-extract-plugin

SVG React Loader​

React App, React Component, Module — Loader that transforms SVG files into React components. This loader is used by default on all SVGs except for files with the file name schema *.url.svg. This schema forces the use of the URL loader (see below).

https://github.com/jhamlet/svg-react-loader

URL​

React App, React Component, Module — Returns the file path for the imported file (taking webpack plugins and chunk hashes into account). By default we use that for all images (gif, png, webp, jpe), SVGs if the file name ends with .url.svg, font files (eot, otf, ttf, woff, woff2), video files (mp4,ogg, webm) and audio files (wav, mp3, m4a, aac, oga)

https://webpack.js.org/loaders/url-loader/

Aliases​

https://webpack.js.org/configuration/resolve/

Aliases are a convenient way to allow absolute paths in your import statements. This is especially handy if you have a lot of nested files, that otherwise would need relative paths in their imports.

React App

src    → ./src
data   → ./src/data
view   → ./src/view
utils  → ./src/utils
theme  → ./src/theme
routes → ./src/routes
config → ./src/config
store  → ./src/store

React Component / Module

src → ./src

Babel​

Presets​

env​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-preset-env

react​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-preset-react

typescript​

React App - https://babeljs.io/docs/en/next/babel-preset-typescript

Plugins​

proposal-decorators (legacy)​

React App, React Component, Module — Adds support for decorator syntax (for the legacy proposal).

https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html

proposal-class-properties​

React App, React Component, Module — Allows defining class properties outside of the constructor.

https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties

proposal-json-strings​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-plugin-proposal-json-strings

proposal-object-rest-spread​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-plugin-proposal-object-rest-spread

syntax-import-meta​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-plugin-syntax-import-meta

transform-runtime​

React App, React Component, Module — This plugin makes sure babels helper code, that gets injected, is being reused, to reduce bundle size.

https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

syntax-dynamic-import​

React App, React Component, Module — https://babeljs.io/docs/en/next/babel-plugin-syntax-dynamic-import

transform-react-remove-prop-types​

React App (prod), React Component, Module — Removes prop types from the code in production mode to reduce bundle size.

https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types

transform-react-jsx-source​

React App (dev) — https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-source

transform-react-jsx-self​

React App (dev) — https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-self

Jest​

React App, React Component, Module

The main goal with the jest config is that it automatically transforms any webpack options into whatever jest expects them to look like, removing any pain of having to adjust configs in multiple places.

Options​

moduleNameMapper​

Loads in the webpack aliases for the specific project type and transforms them into the jest module name mapper syntax. It also adds mappers for blob mocks, css mocks and for the stories entry file.

https://jestjs.io/docs/en/configuration#modulenamemapper-object-string-string

modulePathIgnorePatterns​

Set to ignore node_modules.

https://jestjs.io/docs/en/configuration#modulepathignorepatterns-array-string

rootDir​

Set to the current working directory.

https://jestjs.io/docs/en/configuration#rootdir-string

resolver​

We copied jests default resolver and added support for remapping the "main" field to the value of "plz:main" when this is present, to improve DX within libraries that were bootstrapped with plz.

https://jestjs.io/docs/en/configuration#resolver-string

transform​

Custom transformer that uses babel-jest to apply the packages/apps babel config correctly to the jest setup.

https://jestjs.io/docs/en/configuration#transform-object-string-string

https://github.com/facebook/jest/tree/master/packages/babel-jest

transformIgnorePatterns​

Ignores node_modules, unless the runtimeCompilation option is set in the projects plz configuration.

https://jestjs.io/docs/en/configuration#transformignorepatterns-array-string

modulePaths​

Makes sure that both the projects as well as plz's node_modules get included. That should ensure that react is available in e.g. component projects (where it would be a peer dependency).

https://jestjs.io/docs/en/configuration#modulepaths-array-string

testRegex​

Regex to find test files within the project, set to (/src/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$

https://jestjs.io/docs/en/configuration#testregex-string-array-string

automock​

Disables automatic mocking by default.

https://jestjs.io/docs/en/configuration#automock-boolean

setupFiles​

Some custom shims and setups that will be executed before every test run. This includes shims for requestAnimationFrame and cancelAnimationFrame, as well as setting up enzyme (incl. the React adapter for React 16).

https://jestjs.io/docs/en/configuration#setupfiles-array

https://airbnb.io/enzyme/docs/installation/react-16.html

Storybook​

React App, React Component

As with jest, the goal with the storybook config that comes with plz is to reuse the webpack/babel configs from the project as much as possible. So in the following we'll focus on the storybook specific settings and addons.

Addons​

Knobs​

Allows specifying props for your stories and will then enable adjusting these props in the UI. Supports various prop types.

https://github.com/storybooks/storybook/tree/master/addons/knobs

A11y​

Shows accessibility information about the story in the storybook sidebar.

https://github.com/storybooks/storybook/tree/master/addons/a11y

Actions​

Allows storybook specific logging e.g. to apply to event handlers to test those in storybook.

https://github.com/storybooks/storybook/tree/master/addons/actions

Theming​

The latest version of storybook allows us to apply custom themes. By default plz does not apply any theme, but you can do so by adding the srotybook.theme option to your plz config.

https://github.com/storybooks/storybook/blob/master/docs/src/pages/configurations/theming/index.md

https://github.com/storybooks/storybook/blob/master/docs/src/pages/configurations/options-parameter/index.md

How does plz load the stories​

Plz wraps around storybooks core. Depending on where plz stories is called from (root of project vs root of mono repo) plz will create a glob pattern file and will then try to match all files in the project that follow that pattern. For projects this pattern is src/.stories.js for the stories and README.md for readme's (to be pulled in via the vivid specific custom addon).